【示例】mui.getJSONP()实现Web跨域

您所在的位置:网站首页 jsonp js 【示例】mui.getJSONP()实现Web跨域

【示例】mui.getJSONP()实现Web跨域

2023-03-31 02:16| 来源: 网络整理| 查看: 265

问题描述

许多开发者使用mui.ajax()在浏览器中调试时,控制台总会出现这样的错误信息:Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 出现这种错误的原因在于浏览器的同源策略,使得本域脚本只能读写本域内的资源,而无法访问其它域的资源,造成了我们常说的“跨域”问题。

问题分析 Web跨域访问的实现

浅谈WEB跨域的实现(前端向)Web应用跨域访问解决方案汇总 网上有许多关于跨域问题的解决方案,这里知识提供两篇文章供大家参考。

JSON和JSONP

提起跨域实现,其实最容易想到的就是JSONP。这种技术方案已经非常流行,网上也有大量的资料供我们学习和参考。说说JSON和JSONP,也许你会豁然开朗jsonp详解JSONP 的工作原理是什么?JSONP 教程

解决方案 mui.ajax()

查看源码我们会发现mui.ajax()会根据运行情景的不同,而创建不同的XMLHttpRequest。扩展阅读:mui.ajax()方法中的XMLHttpRequest

在5+默认的UIWebview中被允许调用window的XHR进行跨域访问。 并且5+提供的XHR也是可以进行跨域访问的。如何判断Runtime是否支持5+ API

mui.getJSONP()

mui同样提供了JSONP的插件(mui.jsonp.js见附件)来实现Web跨域,方法为mui.getJSONP()。 该方法有三个参数:

url——请求发送的目标地址(String) data——发送到服务器的业务数据(Object) callback——请求回调函数(Function)

请求方式默认并始终是GET方式,因为JSONP实际是在客户端动态添加了个然后将url指向要请求的地址,script是没有同源策略的。

示例(后端为php) php部分 JS部分

需要引入mui.js以及mui.jsonp.js

var data = { name: 'xiaoming', code: '200' }; mui.getJSONP('http://192.168.12.74/jsonp.php', data, function(data) { console.log(data); });

mui.getJSONP()方法传递给服务器的回调函数的请求参数名在callback的参数中。

源码

附上源码,测试的时候记得更换下IP地址。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3